Visitenbuch/src/routes/(app)/entry/[id]/versions/+page.svelte

72 lines
1.8 KiB
Svelte

<script lang="ts">
import { page } from "$app/stores";
import type { PageData } from "./$types";
import { formatBool, formatDate } from "$lib/shared/util";
import CategoryField from "$lib/components/table/CategoryField.svelte";
import UserField from "$lib/components/table/UserField.svelte";
import Header from "$lib/components/ui/Header.svelte";
export let data: PageData;
$: entryId = $page.params.id;
</script>
<svelte:head>
<title>Eintrag #{entryId} - Versionen</title>
</svelte:head>
<Header backHref="/entry/{entryId}" title="Eintrag #{entryId} - Versionen" />
{#each data.versions as version, i}
<div class="card2">
<div class="row c-light text-sm">
#{i + 1}&nbsp;
<UserField user={version.author} />, {formatDate(version.created_at, true)}
</div>
{#if version.category}
<div class="row">
<div>Kategeorie</div>
<div><CategoryField category={version.category} /></div>
</div>
{/if}
{#if version.text.length > 0}
<div class="row">
<div>Text</div>
<div class="whitespace-pre-wrap">
{#each version.text as change}
<span class:added={change.added} class:removed={change.removed}>
{change.value}
</span>
{/each}
</div>
</div>
{/if}
{#if version.date !== undefined}
<div class="row">
<div>Datum</div>
<div>{formatDate(version.date)}</div>
</div>
{/if}
{#if version.priority !== undefined}
<div class="row">
<div>Priorität</div>
<div>{formatBool(version.priority)}</div>
</div>
{/if}
</div>
{/each}
<style lang="postcss">
.row > div:first-child {
min-width: 6.5rem;
}
.added {
@apply bg-success/20;
}
.removed {
@apply bg-error/20;
}
</style>